Walkthrough

Adds URL-driven composer autofocus (via ?new=1) and responsive right-panel initialization based on viewport width; passes an autoFocusComposer prop into MessagesPanel and synchronizes panel state when program/partner selection changes.

Changes

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Router as Router/Navigation
    participant Layout as Messages Layout
    participant Page as Page Client
    participant Panel as MessagesPanel
    participant Input as MessageInput

    User->>Router: select program/partner
    Router->>Layout: navigate to /messages/{id}?new=1
    Layout->>Layout: setCurrentPanel("main")
    Layout->>Page: render page-client for selection
    Page->>Page: read searchParams (?new=1) and width
    Page->>Router: router.replace(...) to remove ?new=1
    Page->>Panel: render with autoFocusComposer=true
    Panel->>Input: render with autoFocus = !isMobile || autoFocusComposer
    Input->>User: focus composer input

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

• Mobile messages fix #2846: Similar media-query–driven panel initialization and messaging layout edits across partner/app message pages.
• Adds partner fast switcher #2931: Touches the same app dashboard messages page-client file and related navigation logic.
• Add personalized message placeholders to MessagesPanel #2907: Modifies MessagesPanel props and prop forwarding to message input, directly intersecting with autoFocusComposer changes.

Suggested reviewers

• steven-tey
• devkiran

"I hopped through code with nimble feet,
A ?new=1 carrot, oh so sweet,
Panels that open by width's tune,
Composer wakes beneath the moon,
Hooray — messages ready, neat!" 🐇✨

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

• 📝 Generate docstrings

apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/messages/[partnerId]/page-client.tsx (1)

94-100: width in the dependency array will override manual panel toggles on resize.

Since width is a continuously reactive value (updates on window resize), this effect will reset isRightPanelOpen on every resize event — overriding any manual toggle the user performed (e.g., user closes the panel on a wide screen, then resizes slightly and it reopens).

If the intent is to set the initial panel state only when switching conversations, consider tracking whether the user has manually toggled and skipping the effect in that case, or removing width from the deps and using it only as a read inside the effect triggered by partnerId.

♻️ Suggested approach: only reset on conversation change

- const [isRightPanelOpen, setIsRightPanelOpen] = useState(false);
- const shouldAutoFocusComposer = searchParams.get("new") === "1";
-
- useEffect(() => {
-   if (typeof width !== "number") return;
-   setIsRightPanelOpen(width >= 960);
- }, [partnerId, width]);
+ const [isRightPanelOpen, setIsRightPanelOpen] = useState(false);
+ const shouldAutoFocusComposer = searchParams.get("new") === "1";
+
+ useEffect(() => {
+   if (typeof width !== "number") return;
+   setIsRightPanelOpen(width >= 960);
+   // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [partnerId]);

Alternatively, if you do want the panel to respond to crossing the 960 px breakpoint (not every pixel change), a cleaner approach would be to derive a boolean isDesktop = width >= 960 and depend on that instead — so the effect only fires on actual breakpoint transitions.

♻️ Alternative: depend on a breakpoint boolean

+ const isDesktop = typeof width === "number" && width >= 960;
+
  useEffect(() => {
-   if (typeof width !== "number") return;
-   setIsRightPanelOpen(width >= 960);
- }, [partnerId, width]);
+   setIsRightPanelOpen(isDesktop);
+ }, [partnerId, isDesktop]);

• X
• Mastodon
• Reddit
• LinkedIn